<template>
	<view v-if="loaded && testCase" class="col case-card" @click="handleClick">
		<view class="row">
			<text class="cat2bug-label">{{ $t('id') }}</text><text class="cat2bug-text">{{ caseNumber(testCase) }}</text>
		</view>
		<view class="row">
			<text class="cat2bug-label">{{ $t('title') }}</text><text class="cat2bug-text">{{ testCase.caseName }}</text>
		</view>
		<view class="row">
			<text class="cat2bug-label">{{ $t('preconditions') }}</text><text class="cat2bug-text">{{ testCase.casePreconditions }}</text>
		</view>
		<view class="row">
			<text class="cat2bug-label">{{ $t('expect') }}</text><text class="cat2bug-text">{{ testCase.caseExpect }}</text>
		</view>
		<view class="row">
			<text class="cat2bug-label">{{ $t('step') }}</text>
			<view class="col">
				<view class="row case-step" v-for="(step,stepIndex) in steps" :key="stepIndex" :data-state="step.state" @click.stop="handleCaseStepClick($event, step, stepIndex)">
					<text class="cat2bug-text-number">{{ stepIndex + 1 }}</text>
					<view class="col">
						<text class="cat2bug-text">{{ step.stepDescribe }}</text>
						<text class="cat2bug-text">{{ step.stepExpect }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="col case-empty-data case-card" v-else @click="handleClick">
		<text>{{ emptyText }}</text>
	</view>
</template>
<script>
	// 没有测试
	const NOT_TEST_KEY = 'case.not-tested';
	// 通过测试
	const PASS_TEST_KEY = 'case.pass-tested';
	// 未通过
	const FAILED_TEST_KEY = 'case.failed-tested';
	
	export default {
		name: 'CaseCard',
		model: {
			prop: 'stepIndex',
			event: 'input'
		},
		data() {
			return {
				stepList: null
			}
		},
		props: {
			editable: {
				type: Boolean,
				default: true
			},
			testCase: {
				type: Object,
				default: null
			},
			stepIndex: {
				type: Number,
				default: 0
			},
			maxShowCaseCount: {
			  type: Number,
			  default: 3
			},
			emptyDataText: {
			  type: String,
			  default: null
			},
		},
		watch: {
			'testCase.caseStep': function(n) {
				this.stepList = n;
			}
		},
		computed: {
			/** 是否加载完成  */
			loaded() {
				return this.$i18n.locale?true:false;
			},
			/** 显示的步骤 */
			steps: function() {
				let ret = this.stepList||(this.testCase?this.testCase.caseStep:[]);
				if(this.editable && ret.length>0) {
					const setpIndex = this.stepIndex || 0;
					for(let i = 0;i<=setpIndex;i++){
					    ret[i].state=PASS_TEST_KEY;
					}
					if(ret.length>setpIndex) {
						ret[setpIndex].state = FAILED_TEST_KEY;
						for (let i = setpIndex + 1; i < ret.length; i++) {
							ret[i].state = NOT_TEST_KEY;
						}
					}
				}
				return ret;
			},
			/** 空数据的显示文字 */
			emptyText() {
				return this.emptyDataText || this.$i18n.t('empty-data');
			},
			/** 用于显示的用例编号 */
			caseNumber: function () {
				return function (val) {
					return '#'+val.caseNum;
				}
			},
		},
		methods: {
			/** 处理点击步骤 */
			handleCaseStepClick(e, step, index) {
				this.$emit('input', index);
				if(!this.editable) {
					this.handleClick(e);
				}
			},
			handleClick(e) {
				this.$emit('click');
			},
			reset() {
				const caseStep = this.steps.map(cs=>{
					return {
						...cs,
						state: NOT_TEST_KEY
					}
				});
				this.stepList = caseStep;
			}
		}
	}
</script>

<style lang="scss" scoped>
.case-step {
    border-radius: 3px;
	// border: 1px solid #ededed;
	padding: 10rpx;
}
.case-step[data-state='case.not-tested'] {
  //background-color: #f4f4f5;
  //border: 1px solid #d3d4d6;
}
.case-step[data-state='case.pass-tested'] {
  background-color: #f0f9eb;
  border: 1rpx solid #c2e7b0;
  .cat2bug-text {
	  color: #67c23a;
  }
}
.case-step[data-state='case.failed-tested'] {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  .cat2bug-text {
	  color: #f56c6c;
  }
}
.case-empty-data {
	justify-content: center;
	align-items: center;
	width: calc(100% - 20rpx);
	height: 80rpx;
	border: 1rpx dashed $uni-border-color;
	border-radius: 10rpx;
}
.case-card {
	margin: 10rpx;
}
</style>